@extends('layout.index')
@section('content')
    <style>
        body {
            background-color: $ffffff;
        }
        .zyupload {
            height: 320px !important;
            margin: 0 !important;
        }
        .course-img {
            position: absolute;
            margin-left: 630px;
            margin-top: -168%;
        }
        .course-img img{
            height: 150px;
            width: 300px;
        }
    </style>  
<link rel="stylesheet" href="{{asset('admin/lib/jq-module/zyupload/zyupload-1.0.0.min.css')}}" media="all">
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">课程题目</label>
        <div class="layui-input-block">
            <input type="text" name="course_title" lay-verify="required" lay-reqtext="标题不能为空" placeholder="请输入标题" value="{{$course->course_title}}" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">课程分类</label>
        <div class="layui-input-inline">
        <select name="cat_id" lay-filter="aihao">
            <option value=""></option>
            @foreach($cats as $cat)
            <option value="{{$cat->id}}" {{$course->cat_id==$cat->id?'selected':''}}> {{$cat->cat_name}} </option>
            @endforeach
        </select>
        </div>
    </div>  

    <div class="layui-form-item">
        <label class="layui-form-label required">课程封面</label>
        <div class="layui-input-inline">
            <div id="zyupload" class="zyupload"></div>
            <div class="course-img">
                <img src="{{$course->course_img}}" >
            </div>
            <input id="course_img" type="hidden" name="course_img" value="{{$course->course_img}}">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">原价</label>
        <div class="layui-input-block">
            <input type="text" name="ori_price" lay-verify="required" lay-reqtext="价格不能为空" placeholder="请输入" value="{{$course->ori_price}}" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">优惠价</label>
        <div class="layui-input-block">
            <input type="text" name="pro_price" lay-verify="required" lay-reqtext="价格不能为空" placeholder="请输入" value="{{$course->pro_price}}" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">特别推荐</label>
        <div class="layui-input-block">
            <input type="radio" name="is_special" value="1" {{$course->is_special==1?'checked':''}} title="是">
            <input type="radio" name="is_special" value="0" {{$course->is_special==0?'checked':''}} title="否">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">上架</label>
        <div class="layui-input-block">
            <input type="radio" name="is_on" value="1" {{$course->is_on==1?'checked':''}} title="是">
            <input type="radio" name="is_on" value="0" {{$course->is_on==0?'checked':''}} title="否">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">课程详情</label>
        <div class="layui-input-block">
            <div id="div1">{{!!$course->intro!!}}</div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>

<script src="{{asset('admin/lib/jq-module/zyupload/zyupload-1.0.0.min.js')}}" charset="utf-8"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
<script type="text/javascript">

    // 富文本 wangEditor
    const E = window.wangEditor;
    const editor = new E("#div1");
    // 或者 const editor = new E(document.getElementById('div1'))
    // 配置服务器端接口
    editor.config.uploadImgServer = '/admin/course/upIntroImg';
    // 自定义文件名
    editor.config.uploadFileName = 'file';
    editor.create();



    $(function () {
        // 初始化插件
        $("#zyupload").zyUpload({
            width: "600px",                 // 宽度
            height: "200px",                 // 宽度
            itemWidth: "140px",                 // 文件项的宽度
            itemHeight: "115px",                 // 文件项的高度
            url: "/admin/course/upload",  // 上传文件的路径
            fileType: ["jpg", "png", "jpeg"],// 上传文件的类型
            fileSize: 51200000,                // 上传文件的大小
            multiple: true,                    // 是否可以多个文件上传
            dragDrop: true,                    // 是否可以拖动上传文件
            tailor: true,                    // 是否可以裁剪图片
            del: true,                    // 是否可以删除文件
            finishDel: false,  				  // 是否在上传文件完成后删除预览
            /* 外部获得的回调接口 */

            onSuccess: function (file, response) {          // 文件上传成功的回调方法
                res = JSON.parse(response); 
                if (res.status == 'seccess') {
                    $(".course_img").attr('src', res.url);
                    $(".course-img img").attr('src', res.url);
                    $("#course_img").val(res.url);
                }
                
            }
        });

    });
</script>
<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        //监听提交
        form.on('submit(saveBtn)', function (data) {

            data.field['intro'] = editor.txt.html();
            $.ajaxSetup({
                headers:{'X-CSRF-TOKEN': '{{csrf_token()}}'}
            });
            $.ajax({
                type: 'PUT',
                data: data.field,
                url: '/admin/course/' + {{$course->id}},
                success: function(res) {
                    if (res.status=='success') {
                        location.href = '/admin/course';
                        layer.close(index);
                    }
                }
            })

            return false;
        });

    });
</script>
</body>
@endsection